<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
        <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
            <!DOCTYPE html>
            <html>

            <head>
                <meta charset="UTF-8">
                <title>${detail.name} - 图书详情</title>
                <link rel="shortcut icon" href="img/library.ico" />
                <link rel="stylesheet" href="css/bootstrap.min.css">
                <script src="js/jquery-3.2.1.js"></script>
                <script src="js/bootstrap.min.js"></script>
                <script>
                    $(function () {
                        $('#header').load('reader_header.html');
                    })
                </script>
                <style>
                    body {
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                        background-attachment: fixed;
                        padding-bottom: 80px;
                    }

                    .book-info,
                    .review-form,
                    .review-list {
                        margin-bottom: 20px;
                        padding: 15px;
                        background-color: #f8f9fa;
                        border-radius: 5px;
                    }

                    .average-rating .stars .star.filled {
                        color: #ffd700;
                    }

                    .review-item {
                        border-bottom: 1px solid #eee;
                        padding: 15px 0;
                    }

                    .review-header {
                        display: flex;
                        justify-content: space-between;
                        margin-bottom: 10px;
                    }

                    .reviewer-name {
                        font-weight: bold;
                        color: #333;
                    }

                    .review-date {
                        color: #666;
                        font-size: 0.9em;
                    }

                    .review-rating .star.filled {
                        color: #ffd700;
                    }

                    .review-content {
                        color: #444;
                        line-height: 1.5;
                    }

                    .message {
                        padding: 10px;
                        margin-bottom: 15px;
                        border-radius: 4px;
                    }

                    .message.success {
                        background-color: #d4edda;
                        color: #155724;
                    }

                    .message.error {
                        background-color: #f8d7da;
                        color: #721c24;
                    }

                    .rating-input {
                        display: inline-block;
                        unicode-bidi: bidi-override;
                        direction: rtl;
                    }

                    .rating-input>input {
                        display: none;
                    }

                    .rating-input>label:before {
                        content: '\2605';
                        font-size: 24px;
                        padding: 0 2px;
                        cursor: pointer;
                    }

                    .rating-input>input:checked~label:before,
                    .rating-input>input:checked~label:before,
                    .rating-input>label:hover:before,
                    .rating-input>label:hover~label:before {
                        color: #ffd700;
                    }

                    .rating-input>input:checked~label,
                    .rating-input>label:hover,
                    .rating-input>label:hover~label {
                        color: transparent;
                    }
                </style>
            </head>

            <body background="img/华师2.jpg.v">
                <div id="header"></div>
                <div class="container">
                    <h1>${detail.name}</h1>

                    <!-- 显示提示信息 -->
                    <c:if test="${not empty param.msg}">
                        <div
                            class="message ${param.msg.contains('成功') ? 'success alert alert-success' : 'error alert alert-danger'}">
                            ${param.msg}
                        </div>
                    </c:if>

                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <h3 class="panel-title">图书信息</h3>
                        </div>
                        <div class="panel-body">
                            <table class="table table-hover">
                                <tbody>
                                    <tr>
                                        <th>作者</th>
                                        <td>${detail.author}</td>
                                    </tr>
                                    <tr>
                                        <th>出版社</th>
                                        <td>${detail.publish}</td>
                                    </tr>
                                    <tr>
                                        <th>出版日期</th>
                                        <td>${detail.pubdate}</td>
                                    </tr>
                                    <tr>
                                        <th>ISBN</th>
                                        <td>${detail.isbn}</td>
                                    </tr>
                                    <tr>
                                        <th>评分</th>
                                        <td>
                                            <span class="rating-stars">
                                                <c:forEach begin="1" end="${(averageRating + 0.5).intValue()}">★
                                                </c:forEach>
                                                <c:forEach begin="${(averageRating + 0.5).intValue() + 1}" end="5">☆
                                                </c:forEach>
                                            </span>
                                            (${averageRating})
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>简介</th>
                                        <td>${detail.introduction}</td>
                                    </tr>
                                    <tr>
                                        <th>状态</th>
                                        <c:if test="${detail.number>1}">
                                            <td>在馆</td>
                                        </c:if>
                                        <c:if test="${detail.number==0}">
                                            <td>借出</td>
                                        </c:if>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- 评论表单 -->
                    <c:if test="${not empty sessionScope.readerId}">
                        <div class="panel panel-info">
                            <div class="panel-heading">
                                <h3 class="panel-title">发表评论</h3>
                            </div>
                            <div class="panel-body">
                                <form action="/bookReview/add" method="post">
                                    <input type="hidden" name="bookId" value="${detail.bookId}">

                                    <div class="form-group">
                                        <label for="rating">评分:</label>
                                        <div class="rating-input">
                                            <input type="radio" name="rating" value="5" id="rating5" required><label
                                                for="rating5"></label>
                                            <input type="radio" name="rating" value="4" id="rating4"><label
                                                for="rating4"></label>
                                            <input type="radio" name="rating" value="3" id="rating3"><label
                                                for="rating3"></label>
                                            <input type="radio" name="rating" value="2" id="rating2"><label
                                                for="rating2"></label>
                                            <input type="radio" name="rating" value="1" id="rating1"><label
                                                for="rating1"></label>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="reviewText">评论内容:</label>
                                        <textarea name="reviewText" id="reviewText" rows="4" class="form-control"
                                            required></textarea>
                                    </div>

                                    <button type="submit" class="btn btn-primary">提交评论</button>
                                </form>
                            </div>
                        </div>
                    </c:if>

                    <!-- 评论列表 -->
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">评论列表 (共 ${fn:length(reviews)} 条评论)</h3>
                        </div>
                        <div class="panel-body">
                            <c:if test="${empty reviews}">
                                <p>暂无评论，快来发表你的看法吧！</p>
                            </c:if>

                            <c:forEach items="${reviews}" var="review">
                                <div class="review-item">
                                    <div>
                                        <strong>${review.readerName}</strong>
                                        <span class="rating-stars">
                                            <c:forEach begin="1" end="${review.rating}">★</c:forEach>
                                            <c:forEach begin="${review.rating + 1}" end="5">☆</c:forEach>
                                        </span>
                                        <span style="font-size: 0.8em; color: #6c757d;">${review.reviewDate}</span>
                                    </div>
                                    <p>${review.reviewText}</p>

                                    <!-- 删除评论按钮 (仅显示给评论作者) -->
                                    <c:if test="${sessionScope.readerId == review.readerId}">
                                        <button onclick="deleteReview('${review.reviewId}', '${detail.bookId}')"
                                            class="btn btn-danger btn-xs">删除评论</button>
                                    </c:if>
                                </div>
                            </c:forEach>
                        </div>
                    </div>
                </div>

                <script>
                    function deleteReview(reviewId, bookId) {
                        if (!reviewId || !bookId) {
                            alert("参数错误");
                            return;
                        }

                        if (confirm("确定要删除这条评论吗？")) {
                            const formData = new URLSearchParams();
                            formData.append('reviewId', reviewId);
                            formData.append('bookId', bookId);

                            fetch("/bookReview/delete", {
                                method: "POST",
                                headers: {
                                    "Content-Type": "application/x-www-form-urlencoded"
                                },
                                body: formData.toString()
                            })
                                .then(response => {
                                    if (!response.ok) {
                                        return response.text().then(text => {
                                            throw new Error(text || '网络响应不正常');
                                        });
                                    }
                                    return response.json();
                                })
                                .then(data => {
                                    alert(data.msg);
                                    if (data.success) {
                                        location.reload();
                                    }
                                })
                                .catch(error => {
                                    console.error("Error:", error);
                                    alert(error.message || "删除评论时出错，请稍后重试");
                                });
                        }
                    }
                </script>
            </body>

            </html>